{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}} - {{video.channelName}}</title>
<meta name="twitter:card" content="player" />
<meta property="og:site_name" content="{{sysSettings.siteName}}" />
<meta property="og:title" content="{{video.channelName}}" />
<meta property="og:type" content="video.other" />
<meta property="og:url" content="{{request.url|normalize_url}}" />
<meta property="og:image" content="{{request.url_root|normalize_urlroot}}/videos/{{video.thumbnailLocation}}" />
<meta property="og:description" content="{{video.description}}" />
<meta property="og:video" content="{{request.url_root|normalize_urlroot}}{{streamURL}}" />
<meta property="og:video:type" content="video/mp4" />
<link href="/static/vendor/videojs/css/video-js.css" rel="stylesheet">
<script type="text/javascript" src="/static/vendor/socketio/js/socket.io.js"></script>

<script>
  function newScreenShot() {
    player.pause();
    window.whereYouAt = player.currentTime();
    document.getElementById("thumbnailTimestamp").value = window.whereYouAt;
    socket.emit('newScreenShot', { loc: '{{video.id}}', timeStamp: window.whereYouAt });
  }
</script>
{% endblock %}

{% block body %}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg col-xs-12 col-sm-12">
      <div class="index-video-title ml-2 my-2">
        <span class="float-left" id="channelName">{{video.channelName}}</span>{% if video.channel.protected and sysSettings.protectionEnabled %}<h6 style="display: inline; margin: 0px;"><span class="liveindicator badge badge-info float-left m-2"><i class="fas fa-user-lock"></i>
            <span class="d-none d-sm-none d-md-inline">Protected</span></span></h6>{% endif %}
      </div>
    </div>
    <div class="col-lg-auto col-sm-12" style="width:450px;">
    </div>
  </div>

  <div class="row">
    <div class="col-lg" id="videoWindow">
      <div class="videoPanel">
        <div class="player ml-2">
          <div id="videoContainer">
            <video id="video" class="shadow recordedStream video-js vjs-big-play-centered" poster="/videos/{{video.thumbnailLocation}}" autoplay controls preload="auto" data-setup='{"fluid": true}'>
              <source src="{{streamURL}}" type="video/mp4">
              <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
              </p>
            </video>
          </div>
        </div>
        <div class="row m-2">
          <div class="video-buttons-row">
            <span class="float-left">
              <b><i class="fas fa-podcast mr-2"></i></b> <a href="/channel/{{video.channel.id}}/">{{video.channel.channelName}}</a><br />
              <b><i class="fas fa-hashtag mr-2"></i></b> <a href="/topic/{{video.topic}}/">{{video.topic|get_topicName}}</a>
            </span>
            <span class="float-right ml-2">
              <b><i class="fas fa-calendar-alt mr-2"></i></b> {{video.videoDate|normalize_date}} <br />
              <i class="fas fa-users"></i> {{video.views}}
              <i class="fas fa-star mx-2"></i> {{video.channel.subscriptions|length}}
            </span>
            <span class="float-right mx-1">
              <span class="float-right mx-1">
                <div class="btn-group" role="group">
                  <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i id="cog" class="fas fa-bars"></i></button>
                  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                    <a class="dropdown-item" href="{{streamURL}}" download><i class="fas fa-download"></i> Download
                      Video</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#commentModal" {% if video.allowComments == False or sysSettings.allowComments == False %} disabled aria-disabled="true" {% endif %}><i class="fas fa-comment"></i>
                      Create Comment</a>
                    <a class="dropdown-item" href="#" class="btn btn-primary shadow" data-toggle="modal" data-target="#shareModal"><i class="fas fa-share-alt"></i> Share Video</a>
                  </div>
                  <span class="float-right mx-1">
                    {% if current_user.is_authenticated %}
                    <button id="chanSubStateButton" class="btn {% if subState == True %} btn-outline-success {% else %} btn-outline-secondary {% endif %}" onclick='toggleChannelSub("{{video.channel.id}}")'>{% if subState == True %}<i class="fas fa-star"></i>{% else %}<i class="far fa-star"></i>{% endif %}</button>
                    {% else %}
                    <button id="chanSubStateButton" class="btn btn-outline-secondary disabled" disabled><i class="far fa-star"></i></button>
                    {% endif %}
                  </span>
                  <span class="float-right">
                    <button id="upvoteButton" type="button" class="btn btn-outline-secondary" onclick="changeUpvote('video',{{video.id}});" title="Upvote">
                      <i id="upVoteIcon" class="far fa-thumbs-up"> <span id="totalUpvotes"></span></i>
                    </button>
                  </span>
                </div>
              </span>
              {% if video.owningUser == current_user.id %}
              <span class="float-right">
                <div class="btn-group" role="group">
                  <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i id="cog" class="fas fa-cogs"></i></button>
                  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                    <a class="dropdown-item" href="#" onclick="newScreenShot();"><i class="fas fa-camera"></i> Create
                      Thumbnail</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#moveModal"><i class="fas fa-arrow-circle-right"></i> Move to Channel</a>
                    <a class="dropdown-item" href="#" onclick="openClipModal();"><i class="fas fa-cut"></i> Create a
                      Clip</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit Details</a>
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash-alt"></i> Delete Video</a>
                  </div>
                </div>
              </span>
              {% endif %}
            </span>
          </div>
        </div>
        <!-- <hr style="width: 100%;"> -->
        <div class="row m-2">
          <div class="videodescription">{% if video.description != None %}<p>{{video.description|markdown}}</p>
            {% else %}No Description Available {% endif %}</div>
        </div>
        {% if video.comments != [] and sysSettings.allowComments == True and video.allowComments == True %}
        <div class="row m-2">
          <div class="index-video-title mb-2"><b>{{video.id|get_Video_Comments}} Comments</b></div>
          {% for comment in video.comments %}
          <div class="comment mb-2">
            <div class="row">
              <div class="col-auto mr-auto">
                <a href="/streamers/{{comment.userID}}/"><b>{{comment.userID|get_userName}}</b><br>
                  <img src="{{comment.userID|get_pictureLocation}}" width="64px" height="64px" onerror="this.src='/static/img/user2.png';"></a>
              </div>
              <div class="col">
                <i class="fas fa-calendar-alt mr-2"></i> {{comment.timestamp|normalize_date}}<br>
                <p>{{comment.comment|markdown}}</p>
              </div>
              <div class="col-lg-2 col-md-2">
                <div class="float-md-right float-left">
                  {% if check_isCommentUpvoted(comment.id) %}<button id="commentUpvoteButton-{{comment.id}}" type="button" class="btn btn-success" onclick="changeUpvote('comment',{{comment.id}});"> <i id="commentUpvoteIcon-{{comment.id}}" class="fas fa-thumbs-up"></i>
                    {% else %} <button type="button" id="commentUpvoteButton-{{comment.id}}" type="button" class="btn btn-outline-success" onclick="changeUpvote('comment',{{comment.id}});"> <i id="commentUpvoteIcon-{{comment.id}}" class="far fa-thumbs-up"></i>
                      {% endif %}
                      <span id="upvoteTotalComments-{{comment.id}}">{{comment.upvotes|length}}</span></button>
                    {% if video.owningUser == current_user.id or user.has_role('Admin') or comment.userID == current_user.id %}
                    <button type="button" data-id="{{comment.id}}" class="deleteComment btn btn-danger shadow" data-toggle="modal" data-target="#deleteCommentModal">
                      <i class="fas fa-trash-alt"></i>
                    </button>
                    {% endif %}
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
    <div id="chatside" class="col-lg-auto col-xs-12 col-sm-12">
      <div class="col-lg-auto col-sm-12 col-xs-12">
        <div class="row ml-2 mr-1">
          <div class="index-video-title mb-2"><b>Other Videos</b></div>
          <div class="chatbox" id="chatBlock">
            {% for video in randomRecorded[:4] %}

            <div class="video-card bg-dark mb-3" style="max-width: 20rem;">
              <div class="video-card-header">
                <a href="/play/{{video.id}}">
                  <img class="shadow lazy card-img-top" width="100%" {% if video.channel.protected and sysSettings.protectionEnabled %} src="/static/img/video-locked.jpg" onerror="this.src='/static/img/video-locked.jpg';" {% else %} src="/static/img/video-placeholder.jpg" onerror="this.src='/static/img/video-placeholder.jpg';" {% endif %} data-src="/videos/{{video.thumbnailLocation}}">

                </a>
              </div>
              <div class="video-card-body">
                <i class="fas fa-tv mr-2"></i><span class="video-title"><a href="/play/{{video.id}}"><b>
                      {{video.channelName|limit_title}}</b></a></span><br />
                {% if video.channel.protected and sysSettings.protectionEnabled %}<span class="float-right"><span class="badge badge-info"><i class="fas fa-user-lock"></i> Protected</span></span>{% endif %}<br />
                <i class="fas fa-podcast mr-2"></i><a href="/channel/{{video.channel.id}}/">
                  {{video.channel.channelName}}</a>
                <span class="float-right"><i class="fas fa-calendar-alt mr-2"></i>
                  {{video.videoDate|normalize_date}}</span><br />
                <i class="fas fa-user mr-2"></i><a href="/streamers/{{video.owningUser}}">
                  {{video.owningUser|get_userName}}</a>
                <span class="float-right"><i class="fas fa-hashtag mr-2"></i></><a href="/topic/{{video.topic}}/">
                    {{video.topic|get_topicName}}</a></span><br />
                <i class="fas fa-thumbs-up mr-2"></i> {{video.id|get_Video_Upvotes}}
                <i class="fas fa-eye mx-2"></i> {{video.views}}
                <i class="fas fa-comments mx-2"></i> {{video.id|get_Video_Comments}}
                <span class="float-right"><i class="fas fa-clock mr-2"></i> {{video.length|hms_format}}</span>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


{% if video.owningUser == current_user.id %}
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalTitle">Edit Video Info</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/play/{{video.id}}/change" method="post">
        <div class="modal-body">

          <h5>Name of the Stream:</h5>
          <input type="text" class="form-control" value="{{video.channelName}}" name="newVidName" required>
          <br>
          <h5>Stream Topic:</h5>
          <select class="form-control" name="newVidTopic" id="channeltopic" required>
            {% for topic in topics %}
            <option value={{topic.id}} {% if video.topic==topic.id %} selected {% endif %}>{{topic.name}}</option>
            {% endfor %}
          </select>
          <br>
          <div class="form-group">
            <label for="description" class="col-form-label"><b>Description</b></label>
            <textarea class="form-control" name="description" id="description" value="" maxlength="2048">{{video.description}}</textarea>
          </div>
          <div class="form-group row">
            <div class="col-8">
              <label for="chatSelect" class="col-form-label"><b>Allow Comments on This Video</b></label>
            </div>
            <div class="col-4">
              <input type="checkbox" data-toggle="toggle" id="allowComments" name="allowComments" {% if video.allowComments == True %} checked {% endif %}>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-primary" value="Save Changes">
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalTitle">Confirm Video Deletion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>Are you sure you want to delete this video?</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <a href="/play/{{video.id}}/delete" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="deleteCommentModal" tabindex="-1" role="dialog" aria-labelledby="deleteCommentModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteCommentModalTitle">Confirm Comment Deletion</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>Are you sure you want to delete this comment?</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <a id="deleteCommentLink" href="#" class="btn btn-danger">Delete</a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="newSSModal" tabindex="-1" role="dialog" aria-labelledby="newSSModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newSSModalTitle">Confirm New Video Thumbnail</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>Use this picture?</h5>
        <img id="newScreenShotImg" src="">
        <input type="hidden" id="thumbnailTimestamp">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <button type="button" onclick="setScreenShot()" class="btn btn-success" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="moveModal" tabindex="-1" role="dialog" aria-labelledby="moveModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form action="/play/{{video.id}}/move" method="post">
        <div class="modal-header">
          <h5 class="modal-title" id="moveModalTitle">Move to Another Channel</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h5>Move this Video to Channel:</h5>
          <select name="moveToChannelID" class="form-control">
            {% for chan in current_user.channels %}
            {% if chan.id != video.channelID %}
            <option value="{{chan.id}}">{{chan.channelName}}</option>
            {% endif %}
            {% endfor %}
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-warning">Move</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="clipModal" tabindex="-1" role="dialog" aria-labelledby="clipModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <form action="/play/{{video.id}}/clip" method="post">
        <div class="modal-header">
          <h5 class="modal-title" id="clipModalTitle">Create a Video Clip</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="player w-100">
            <video id="videoClip" class="shadow video-js vjs-big-play-centered" poster="/videos/{{video.thumbnailLocation}}" controls preload="auto" data-setup='{"fluid": true}'>
              <source src="{{streamURL}}" type="video/mp4">
              <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
              </p>
            </video>
          </div>
          <br>
          <div id="clipTimeSelect">
            <div class="row">
              <div class="col-12 col-md-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <button class="btn btn-primary" type="button" id="clipStartTimeButton" onclick="setClipStart()">A</button>
                  </div>
                  <input type="number" id="clipStartTime" name="clipStartTime" class="form-control" placeholder="Start Time" readonly required>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <button class="btn btn-danger" type="button" id="clipStopTimeButton" onclick="setClipStop()">B</button>
                  </div>
                  <input type="number" id="clipStopTime" name="clipStopTime" class="form-control" placeholder="Stop Time" readonly required>
                </div>
              </div>
            </div>
            <br>
            <input id="clipName" name="clipName" class="form-control" placeholder="Clip Name" maxlength="255" required><br>
            <textarea id="clipDescription" name="clipDescription" class="form-control" placeholder="Description of the Clip" maxlength="2048"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="shareModalTitle">Share video</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div style="margin: 0 auto;width: 99%; text-align: center;">
          <button type="button" id="FBShareBtn" class="btn shadow" style="background-color:#4267B2;color:white;" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u={{request.url}}','facebook-share-dialog','width=626,height=436');return false;">Share
            on Facebook</button>
          <button type="button" id="TwitterShareBtn" class="btn shadow" style="background-color:#1dcaff;color:white;" onclick="window.open('https://twitter.com/share?url={{request.url}}&text=Check out this Video! - {{video.channelName}}','twitter-share-dialog','width=626,height=436');return false;">Share
            on Twitter</button>
        </div>
        <br>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="shareTimestamp" value="shareTimestamp" onclick="toggleShareTimestamp();">
          <label class="form-check-label" for="shareTimestamp">Set URL to Start at Current Timestamp</label>
        </div>
        <div class="form-group row">
          <label for="embedURLInput" class="col-sm-2 col-form-label"><b>Embed</b></label>
          <div class="col-sm-10">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <button type="button" class="btn btn-primary" onclick="CopyDiv('embedURLInput')"><i class="fas fa-copy"></i></button>
              </div>
              <input class="form-control" id="embedURLInput" type="text" value="<iframe src='{{request.url}}?embedded=True&autoplay=True' width=600 height=345></iframe>" readonly onClick="this.select();">
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label for="linkShareInput" class="col-sm-2 col-form-label"><b>Link</b></label>
          <div class="col-sm-10">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <button type="button" class="btn btn-primary" onclick="CopyDiv('linkShareInput')"><i class="fas fa-copy"></i></button>
              </div>
              <input class="form-control" id="linkShareInput" type="text" value="{{request.url}}" readonly onClick="this.select();">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="document.getElementById('shareTimestamp').checked = false;">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="commentModalTitle">Add A Comment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      {% if user.is_authenticated == True %}
      <form action="/play/{{video.id}}/comment" method="post">
        <div class="modal-body">
          <div class="form-group">
            <label for="commentText">Comment</label>
            <textarea class="form-control" id="commentText" name="commentText" rows="3" maxlength="2048"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          <input type="submit" class="btn btn-primary" value="Submit">
        </div>
      </form>
      {% else %}
      <div class="modal-body">
        You must be logged in to post a comment. <br><br>
        <a href="/login" class="btn btn-primary">Login</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/static/vendor/videojs/js/video.js"></script>

<script>
  $(document).on("click", ".deleteComment", function () {
    var mycommentid = $(this).data('id');
    strLink = "/play/{{video.id}}/comment?action=delete&commentID=" + mycommentid
    document.getElementById("deleteCommentLink").setAttribute("href", strLink);
  });
</script>

<script>
  var player = videojs('video', { autoplay: true });
</script>

<script type="text/javascript" charset="utf-8">
  var conn_options = {
    'sync disconnect on unload': true
  };

  var socket = io();
</script>

<script>
  var simplemde = new EasyMDE({ element: document.getElementById("commentText") });
  var simplemde2 = new EasyMDE({ element: document.getElementById("description") });
  {% if video.owningUser == current_user.id %}
  var simplemde3 = new EasyMDE({ element: document.getElementById("clipDescription") });
  {% endif %}
</script>


<script>
  socket.on('connect', function () {
    socket.emit('getUpvoteTotal', { loc: '{{video.id}}', vidType: 'video' });
  });
</script>

<script>
  setInterval(function () {
    socket.emit('getUpvoteTotal', { loc: '{{video.id}}', vidType: 'video' });
  }, 30000);
</script>

<script type="text/javascript" charset="utf-8">
  socket.on('upvoteTotalResponse', function (msg) {

    if (msg['type'] === 'video') {
      upvoteDivID = 'totalUpvotes';
      upvoteIconID = 'upVoteIcon';
      upvoteButtonID = 'upvoteButton';
    } else if (msg['type'] === 'comment') {
      upvoteDivID = 'upvoteTotalComments-' + msg['loc'];
      upvoteIconID = 'commentUpvoteIcon-' + msg['loc'];
      upvoteButtonID = 'commentUpvoteButton-' + msg['loc'];
    }

    document.getElementById(upvoteDivID).innerHTML = msg['totalUpvotes'];

    if (msg['myUpvote'] === 'True') {
      if (document.getElementById(upvoteIconID).classList.contains('far')) {
        document.getElementById(upvoteIconID).classList.remove('far');
        document.getElementById(upvoteIconID).classList.add('fas');
      }
      if (document.getElementById(upvoteButtonID).classList.contains('btn-outline-secondary')) {
        document.getElementById(upvoteButtonID).classList.remove('btn-outline-secondary');
        document.getElementById(upvoteButtonID).classList.add('btn-outline-success');
      }
    }
    else if (msg['myUpvote'] === 'False') {
      if (document.getElementById(upvoteIconID).classList.contains('fas')) {
        document.getElementById(upvoteIconID).classList.remove('fas');
        document.getElementById(upvoteIconID).classList.add('far');
      }
      if (document.getElementById(upvoteButtonID).classList.contains('btn-outline-success')) {
        document.getElementById(upvoteButtonID).classList.remove('btn-outline-success');
        document.getElementById(upvoteButtonID).classList.add('btn-outline-secondary');
      }
    }
  });
</script>

<script>
  function changeUpvote(type, id) {
    socket.emit('changeUpvote', { loc: id, vidType: type });
    socket.emit('getUpvoteTotal', { loc: id, vidType: type });
  }
</script>

<script>
  socket.on('checkScreenShot', function (msg) {
    document.getElementById("newScreenShotImg").src = msg['thumbnailLocation'];
    $("#newSSModal").modal()
  });
</script>


<script>
  function setScreenShot() {
    var timestamp = document.getElementById("thumbnailTimestamp").value;
    socket.emit('setScreenShot', { loc: '{{video.id}}', timeStamp: timestamp });
  }
</script>

{% if startTime != None %}
<script>
  player.currentTime({{ startTime }});
  player.play();
</script>
{% endif %}

<script>
  function toggleShareTimestamp() {
    if (document.getElementById('shareTimestamp').checked) {
      document.getElementById('embedURLInput').value = '<iframe src="{{request.url}}?embedded=True&autoplay=True&startTime='.replace('?startTime={{startTime}}', '') + player.currentTime() + '" width=600 height=345></iframe>';
      document.getElementById('linkShareInput').value = '{{request.url}}'.replace('?startTime={{startTime}}', '') + '?startTime=' + player.currentTime();
    } else {
      document.getElementById('embedURLInput').value = '<iframe src="{{request.url}}?embedded=True&autoplay=True" width=600 height=345></iframe>'.replace('?startTime={{startTime}}', '');
      document.getElementById('linkShareInput').value = '{{request.url}}'.replace('?startTime={{startTime}}', '');
    }
  }
</script>

<script>
  function CopyDiv(divVal) {
    var copyText = document.getElementById(divVal);
    copyText.select();
    document.execCommand("copy");
  }
</script>

{% if video.owningUser == current_user.id %}
<script>
  var clipplayer = videojs('videoClip', { autoplay: false });
</script>

<script>
  function openClipModal() {
    player.pause();

    var startInput = document.getElementById('clipStartTime');
    startInput.value = null;

    var stopInput = document.getElementById('clipStopTime');
    stopInput.value = null;

    var clipDescriptionInput = document.getElementById('clipDescription');
    clipDescriptionInput.value = null;

    $("#clipModal").modal();
  }

  function setClipStart() {
    var startInput = document.getElementById('clipStartTime');
    startInput.value = clipplayer.currentTime()
  }

  function setClipStop() {
    var stopInput = document.getElementById('clipStopTime');
    stopInput.value = clipplayer.currentTime()
  }

</script>
{% endif %}

<script>
  function toggleChannelSub(chanID) {
    socket.emit('toggleChannelSubscription', { channelID: chanID });
  }
</script>
<script>

  socket.on('sendChanSubResults', function (msg) {
    var subButton = document.getElementById('chanSubStateButton');
    if (msg['state'] === true) {
      subButton.innerHTML = "<i class='fas fa-star'></i>";
      subButton.className = "btn btn-outline-success";
    } else {
      subButton.innerHTML = "<i class='far fa-star'></i>";
      subButton.className = "btn btn-outline-secondary";
    }
  });
</script>

{% endblock %}